"Landing page template formate"
Bootstrap 4.1.1 Snippet by Naveen Mandwariya

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <!-- Font awesome CSS --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"> <header> <div class="container-fluid"> <div class="row"> <div class="col-lg-4 col-md-12"> <div class="content-header wow fadeInLeft" data-wow-delay="0.1s"> <a href="tel:9876543210"><i class="fas fa-phone-volume"></i> 9876543210 </a> </div> </div> <div class="col-lg-4 col-md-12"> <div class="logo-box wow fadeInDown" data-wow-delay="0.1s"> <a href="#"> Chai Adda </a> </div> </div> <div class="col-lg-4 col-md-12"> <div class="content-header-social"> <ul class="list-inline social-icons"> <li class="wow fadeInRight" data-wow-delay="0.1s"><a class="fab fa-facebook-f" href="#"></a></li> <li class="wow fadeInRight" data-wow-delay="0.2s"><a class="fab fa-twitter" href="#"></a></li> <li class="wow fadeInRight" data-wow-delay="0.3s"><a class="fab fa-linkedin-in" href="#"></a></li> <li class="wow fadeInRight" data-wow-delay="0.4s"><a class="fab fa-instagram" href="#"></a></li> </ul> </div> </div> </div> </div> </header> <section class="banner-slider-section"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="banner-contentt-text"> <h1 class="wow fadeInUp" data-wow-delay="0.1s"> Tea. The way it should really be. </h1> <p class="wow fadeInUp" data-wow-delay="0.2s"> Importer and purveyor of fine tea since 1994 </p> </div> </div> </div> <div class="banner-more-content_nav"> <div class="row"> <div class="col-lg-7 col-md-12"> <div class="banner-image wow fadeInLeft" data-wow-delay="0.1s"> <img src="https://i.ibb.co/WsdShCH/6910497-preview.png" alt="Chai Adda"> </div> </div> <div class="col-lg-5 col-md-12"> <div class="banner-form wow fadeInRight" data-wow-delay="0.3s"> <form action="" method=""> <div class="form-group"> <input type="text" for="" name="" class="form-control" value="" placeholder="Your Name"> </div> <div class="form-group"> <input type="email" for="" name="" class="form-control" value="" placeholder="Your Email"> </div> <div class="form-group"> <input type="text" for="" name="" class="form-control" value="" placeholder="Your Number"> </div> <div class="form-group"> <button type="submit" class="custom-btn-tea"> Get Started Now! </button> </div> </form> </div> </div> </div> </div> </div> </section> <section class="first-section_nav"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-6"> <div class="first-inner-box wow fadeInUp" data-wow-delay="0.2s"> <img src="https://i.ibb.co/0yQ2d7Z/global-network.png" alt="A global selection"> <h3> A global selection </h3> <p> Our nearly 100 hand-selected teas from across the globe meet superior standards for freshness, flavor and quality.</p> </div> </div> <div class="col-lg-3 col-md-6"> <div class="first-inner-box wow fadeInUp" data-wow-delay="0.4s"> <img src="https://i.ibb.co/5kTk7cq/chai-tea.png" alt=" Superior tea"> <h3> Superior tea </h3> <p> From traditional oolong, black, white, rooibos, herbal and green to specialty flavored, we offer only the finest teas. </p> </div> </div> <div class="col-lg-3 col-md-6"> <div class="first-inner-box wow fadeInUp" data-wow-delay="0.6s"> <img src="https://i.ibb.co/2MpqYbb/correct.png" alt="Sustainability"> <h3> Sustainability </h3> <p> It's important to us. We work directly with tea farmers around the globe; most of our teas are Fair Trade and Organic. </p> </div> </div> <div class="col-lg-3 col-md-6"> <div class="first-inner-box wow fadeInUp" data-wow-delay="0.8s"> <img src="https://i.ibb.co/8b6VYrN/waiter.png" alt="Great service"> <h3> Great service </h3> <p> Our goal is to provide extraordinary products backed by top-notch customer service, education and true passion for tea. </p> </div> </div> </div> </div> </section> <section class="second-section_nav"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="heading-titlee"> <p class="tagline-text"> Chai Adda </p> <h2> About Us </h2> <p> Tea. The way it should really be.</p> </div> </div> <div class="row"> <div class="col-lg-6 col-md-12"> <div class="about-content-tea"> <h3> We want our teas to have more than just great flavor. Great tea should also have superb health properties and be high in quality. </h3> <p> We also treasure our community and our environment. Therefore, we put forth our best efforts to practice sustainable and green activities for the sake of our community and natural environment. </p> <p> We all just want to be…happy. We all want to be healthy. We all want a feeling of belonging and interaction. Tea culture makes it all possible. We want to make a difference through sharing our love for tea and tea culture.</p> </div> </div> <div class="col-lg-6 col-md-12"> <div class="about-image-tea"> <img src="https://i.ibb.co/bgZCfQf/tea-02.png" alt=""> </div> </div> </div> </div> </div> </section> <section class="third-section_nav"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="heading-titlee"> <p class="tagline-text"> Chai Adda </p> <h2> Our Teas </h2> <p> Tea. The way it should really be.</p> </div> </div> </div> <div class="row justify-content-center"> <div class="col-lg-4 col-sm-6"> <div class="our-teas-box"> <ul class="list-inline"> <li><a href="#"><i class="fab fa-pagelines"></i> Earl Grey</a></li> <li><a href="#"><i class="fab fa-pagelines"></i> Assam</a></li> <li><a href="#"><i class="fab fa-pagelines"></i> Chai</a></li> <li><a href="#"><i class="fab fa-pagelines"></i> Tamayokucha</a></li> <li><a href="#"><i class="fab fa-pagelines"></i> Jasmine</a></li> </ul> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="our-teas-box"> <ul class="list-inline"> <li><a href="#"><i class="fab fa-pagelines"></i> Tropical Green</a></li> <li><a href="#"><i class="fab fa-pagelines"></i> Alphe Berry</a></li> <li><a href="#"><i class="fab fa-pagelines"></i> Chamomile</a></li> <li><a href="#"><i class="fab fa-pagelines"></i> Peppermint</a></li> <li><a href="#"><i class="fab fa-pagelines"></i> African Sunset</a></li> </ul> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="our-teas-box"> <ul class="list-inline"> <li><a href="#"><i class="fab fa-pagelines"></i> Better Morning</a></li> <li><a href="#"><i class="fab fa-pagelines"></i> Better Belly</a></li> <li><a href="#"><i class="fab fa-pagelines"></i> Better Rest</a></li> <li><a href="#"><i class="fab fa-pagelines"></i> English Breakfast</a></li> <li><a href="#"><i class="fab fa-pagelines"></i> Whiter than white</a></li> </ul> </div> </div> </div> </div> </section> <section class="forth-section_nav"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1"> <div class="forth-inner-boxx"> <h3> Tea. The way it should really be </h3> <p> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. </p> <a href="tel:9876543210" class="custom-btn-tea"> Contact Us </a> </div> </div> </div> </div> </section> <div class="footer-bottom-tea"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6 col-md-7 text-left"><span class="copyright-text">Copyright © 2021. All rights reserved.</span></div> <div class="col-lg-6 col-md-5 text-right"> <div class="content-header-social"> <ul class="list-inline social-icons"> <li class="wow fadeInRight" data-wow-delay="0.1s"><a class="fab fa-facebook-f" href="#"></a></li> <li class="wow fadeInRight" data-wow-delay="0.2s"><a class="fab fa-twitter" href="#"></a></li> <li class="wow fadeInRight" data-wow-delay="0.3s"><a class="fab fa-linkedin-in" href="#"></a></li> <li class="wow fadeInRight" data-wow-delay="0.4s"><a class="fab fa-instagram" href="#"></a></li> </ul> </div> </div> </div> </div> </div> </footer>
section.banner-slider-section{ background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; height: 100vh; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .banner-contentt-text { text-align: center; padding: 2.5rem; } .logo-box { text-align: center; padding: 15px; } .logo-box a { text-decoration: none; font-size: 52px; font-weight: bold; text-transform: uppercase; letter-spacing: 0; text-align: center; width: 100%; color: #000000bf; text-shadow: 1px 2px #56430936; } .banner-image img { width: 100%; } .banner-form { background: #ffffff; padding: 60px; box-shadow: rgb(0 0 0 / 58%) 0px 50px 100px -20px, rgb(0 0 0 / 52%) 0px 30px 60px -30px; } .custom-btn-tea { width: 100%; border: 0; padding: 12px; background: #000; color: #fff; text-transform: uppercase; font-weight: 600; text-decoration:none; box-shadow: rgb(50 50 93 / 25%) 0px 50px 100px -20px, rgb(0 0 0 / 30%) 0px 30px 60px -30px; } .banner-form .form-control { height: 50px; } .banner-contentt-text h1 { color: #fff; font-size: 56px; line-height: 1.21429; text-shadow: 1px 2px #0000001a; } .banner-more-content_nav { height: 70vh; display: flex; justify-content: center; flex-direction: column; } .banner-contentt-text p { font-size: 25px; font-weight: 300; color:#fff; } section.first-section_nav { background: #fff; padding: 120px 0; } .first-inner-box img { width: 55px; margin-bottom: 1rem; transition:0.5s ease; } .first-inner-box:hover img{ margin-top:-15px; transition:0.5s ease; } .first-inner-box h3 { color: #f15c11; text-shadow: 1px 2px #0000001a; text-transform: capitalize; padding-bottom: 10px; padding-top: 10px; } .about-image-tea img { width: 100%; } section.second-section_nav { padding: 120px 0; background: #f4f4f4; } .heading-titlee h2 { font-size: 40px; font-weight: bold; text-transform: uppercase; } .heading-titlee{ text-align:center; padding-bottom:2.5rem; } p.tagline-text { margin: 0; text-transform: uppercase; font-weight: bold; color: #f15c11; } .content-header { padding: 24px; } .content-header a{ font-size:40px; font-weight:bold; color:#363636; text-decoration:none; } .content-header-social ul li a { color: #000; } .content-header-social ul { margin: 0; text-align: right; } .content-header-social ul li { display: inline-block; padding: 34px 5px; line-height: 55px; } .content-header-social ul li a { background: transparent; padding: 12px; width: 40px; height: 40px; display: block; color: #fff; text-align: center; border-radius: 50px; box-shadow: rgb(50 50 93 / 25%) 0px 50px 100px -20px, rgb(0 0 0 / 30%) 0px 30px 60px -30px; } .about-content-tea { padding: 60px 0; } section.third-section_nav { padding: 120px 0; } .our-teas-box li a i { padding-right: 5px; color: #f15c11; } .our-teas-box li a { text-decoration: none; line-height: 50px; text-align: center; color: #363636; font-size: 18px; font-weight: 600; } section.forth-section_nav { padding: 120px 0; background: #f15c11; text-align: center; } .forth-inner-boxx h3 { font-weight: 700; font-size: 60px; line-height: 1.2; color: #fff; } .forth-inner-boxx p { font-size: 22px; color: #fff; padding-top: 1rem; padding-bottom:1.5rem; } .custom-btn-tea:hover { color: #fff; text-decoration:none; } .forth-inner-boxx .custom-btn-tea { padding: 15px 50px; }

Related: See More


Questions / Comments: